<template>
    <div class="brandDetail">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar
                title="不凡"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <!-- 标题部分 -->
        <div class="brandDetail-title" v-if="data.data">
            <div class="title">
                <img :src="data.data.app_list_pic_url" alt="">
                <div class="mask">
                    <p>{{data.data.name}}</p>
                </div>
            </div>
            <div class="title-bottom">
                <div class="info">{{data.data.simple_desc}}</div>
            </div>
        </div>
        <!-- 商品列表 -->
        <div class="goods-subList" v-if="data.goodsList">
            <ul class="list-items">
                <div
                    class="list-item"
                    v-for="(val, index) in data.goodsList"
                    :key="index"
                    @click="toGoods(val.id)"
                >
                    <img :src="val.list_pic_url" alt="">
                    <p>{{val.name}}</p>
                    <p>￥{{val.retail_price}}</p>
                </div>
                <div class="list-item moreGoods">
                </div>
            </ul>
        </div>
    </div>
</template>

<script>
import { getBrandDetailInfo } from '@/api/home/index'

export default {
    data() {
        return {
            data: ''
        }
    },
    methods: {
        // 返回
        onClickLeft() {
            this.$router.go(-1);
        },
        // 商品列表跳转
        toGoods(id) {
            this.$router.push( { path: '/pages/goods', query: { id, } } )
        },
    },
    created() {
        getBrandDetailInfo({id: this.$route.query.id})
        .then(res => {
            console.log(res);
            this.data = res
        })
    }
}
</script>

<style lang="scss" scoped>
    .brandDetail{
        background: #f4f4f4;
        .header{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            z-index: 9;
        }
        .brandDetail-title{
            margin-top: 1.226667rem;
            .title{
                position: relative;
                width: 100%;
                height: 145px;
                margin-bottom: 1px;
                background: #fff;
                text-align: center;
                img{
                    width: 100%;
                    height: 100%;
                }
                .mask{
                    position: absolute;
                    display: flex;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, .1);
                    p{
                        margin: auto;
                        font-size: .50667rem;
                        color: #fff;
                        border-bottom: .06667rem solid #fff;
                        padding: .06667rem;
                    }
                }
            }
            .title-bottom{
                background: #fff;
                .info{
                    padding: .56rem .42667rem;
                    font-size: .4rem;
                    color: #666;
                }
            }
        }
        .goods-subList{
            width: 100%;
            margin-top: 50px;
            .list-items{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
                .list-item{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    margin-bottom: 6px;
                    width: 180px;
                    background: #fff;
                    img{
                        width: 151px;
                        height: 151px;
                    }
                    p{
                        width: 180px;
                        margin: 0 0 12px 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    p:last-child {
                        color: #9c3232;
                    }
                }
                .moreGoods{
                    height: 0;
                }
            }
        }
    }

</style>
